<template>
  <div class="section section-base page_3">
    <div class="flex-start font30" style="padding-top: 20px;">
      <count-to :startVal="0" :endVal="dataCount" :duration="3000"></count-to>
      <div>个</div>
    </div>
    <div
      class="font16"
      id="fireSystemDes"
    >我们接入了{{detailData.systemCount}}种消防系统，{{detailData.categoryCount}}种设施类别，{{detailData.equipmentCount}}个消防设施。</div>
    <animation-text :text="animationText"></animation-text>
    <div id="page_4_category" style="width:90%;height:300px;"></div>
  </div>
</template>

<script>
let categoryDataX = []
let categoryDataY = []
export default {
  components: {},
  props: {
    reportData: {
      type: Object,
      default: function () {
        return {
          joinTime: {},
        }
      },
    },
    active: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      detailData: {},
      dataCount: 0,
      animationText: '',
    }
  },
  watch: {
    active(val) {
      if (val) {
        this.$nextTick(() => {
          this.init()
        })
      }
    },
  },
  methods: {
    init() {
      this.animationText =
        '每一次的运行数据都会详细记录，</br>每一次的报警都会及时推送。'
      this.detailData = this.reportData.fireSystem
      this.dataCount = this.reportData.fireSystem.equipmentCount
      categoryDataX = this.reportData.fireSystem.dataList
        .map((item) => {
          return item.month + '月'
        })
        .reverse()
      categoryDataY = this.reportData.fireSystem.dataList
        .map((item) => {
          return ((1 - item.percent) * 100).toFixed(2)
        })
        .reverse()
      this.getCategory()
    },
    getCategory() {
      var myChart = echarts.init(document.getElementById('page_4_category'))
      var option = {
        color: ['#ffffff'],
        title: {
          text: '设备完好性百分比', // '注册转化漏斗(总体转化率10%)',
          left: 'center',
          top: 20,
          textStyle: { color: '#ffffff' },
        },
        tooltip: {
          trigger: 'axis',
          formatter: function () {
            return ''
          },
        },
        legend: {
          //['用户数']
          top: 10,
        },
        grid: {
          left: '0%',
          right: '14%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
          axisTick: {
            //y轴刻度线
            show: false,
          },
          splitLine: {
            //网格线
            show: false,
          },
          axisLine: {
            //y轴
            show: false,
          },
          axisLabel: {
            formatter: function () {
              return ''
            },
          },
        },
        yAxis: {
          type: 'category',
          data: categoryDataX,
          axisTick: {
            //y轴刻度线
            show: false,
          },
          splitLine: {
            //网格线
            show: false,
          },
          axisLine: {
            //y轴
            show: false,
          },
          axisLabel: {
            textStyle: {
              //改变刻度字体样式
              color: '#fff',
            },
          },
        },
        series: [
          {
            // name: 'legendData', 	//'用户数',
            barWidth: 10, //设置柱子宽度
            type: 'bar',
            data: categoryDataY,
            itemStyle: {
              //上方显示数值
              normal: {
                color: ['#92B8F5'],
                barBorderRadius: 10,
                label: {
                  show: true, //开启显示
                  position: 'right', //在上方显示
                  formatter: '{c}%',
                  textStyle: {
                    //数值样式
                    color: '#FFD25A',
                    fontSize: 12,
                  },
                },
              },
            },
          },
        ],
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.clear()
      myChart.setOption(option)
    },
  },
  mounted() {},
}
</script>